<template>
	<view>
		<musichead title='搜索' :icon='true' iconColor='#000' :bgcolor='true'></musichead>
		<!-- scroll区域  -->
		<scroll-view scroll-y="true">
			<!-- 搜索模块 -->
			<view class="search-search" >
				<!-- 搜索icon -->
				<text class="iconfont">&#xe60c;</text>
				<!-- 搜索输入框 -->
				<input type="text" placeholder="搜索歌曲" v-model="musicName" @confirm="handelToSearch"  @input="handelToSuggest"/>
			</view>
			<block v-if="serachType === 1
			">
				<!-- 历史记录模块 -->
				<view class="search-history">
					<view class="search-history-head">
						<view>历史记录</view>
						<text class="iconfont" @tap="delAll">&#xe615;</text>
					</view>
					<view class="search-history-item">
						<view v-for="(item , index) in historyName" :key='index' @tap="getHistoryData(item)">{{item}}</view>
					</view>
				</view>
				<!-- 热搜区域 -->
				<view class="search-hot">
					<view class="search-hot-head">
						热搜榜
					</view>
					<view class="search-hot-item" v-for="(item,index) in hotDataList" :key=index
						@tap="hotName(item.searchWord)">
						<view class="search-hot-index" :class="{'search-hot-index-color' : index < 3}">
							{{index+1}}
						</view>
						<view class="search-hot-name">
							<view>
								{{item.searchWord}}
								<view class="search-hot-img">
									<image :src="item.iconUrl" mode='aspectFit'></image>
								</view>
							</view>
							<text>{{item.content}}</text>
						</view>
						<view class="search-hot-count">
							{{item.score}}
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="serachType === 2">
				<view class="search-result">
					<view class="search-result-item" v-for="item in serachList" :key='item.id' @tap="goMusic(item.id)">
						<view class="search-result-name">
							<text>{{item.name}}</text>
							<view><image src="../../static/sq.png" mode='aspectFit'></image>{{item.artists[0].name}}-{{item.album.name}}</view>
						</view>
						<view class="search-result-icon">
							<text class="iconfont">&#xea6e;</text>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="serachType===3">
				<view class="search-suggest">
					<view class="search-suggest-head">
						搜索"{{musicName}}"
					</view>
					<view class="search-suggest-item" v-for="(item,index) in suggestList" :key='index' @tap="getSearchList">
						<text class="iconfont">&#xe60c;</text>
						<text>{{item.keyword}}</text>
					</view>
					
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	// 引入导航栏
	import musichead from '../../components/musichead/musichead'
	export default {
		// 注册导航栏
		components: {
			musichead
		},
		data() {
			return {
				hotDataList: [],
				musicName: '',
				historyName: [],
				serachType:1,
				serachList:[],
				suggestList:[],
				limitNumber:30
			}
		},
		methods: {
			hotName(name) {
				console.log(name);
				this.musicName = name
				this.handelToSearch()
			},
			handelToSearch() {
				let a = 0
				if (this.musicName !== '') {
					this.getSearchList()
					this.historyName.push(this.musicName)
					this.historyName = [...new Set(this.historyName)]
					// this.musicName = ''
					uni.setStorage({
						key: 'historyNameArr',
						data: this.historyName
					})
					if (this.historyName.length > 10) {
						this.historyName.push(this.musicName)
						a++
						this.historyName = this.historyName.slice(a, a + 10)
					}
				}
			},
			delAll() {
				this.historyName = []
				uni.clearStorage()
			},
			searchMusic () {
				this.serachType = 2
			},
			async getSearchList () {
				const {data : res} = await this.$http({
					url:'/search?keywords='+this.musicName+'&limit='+this.limitNumber
				})
				this.serachType = 2
				this.serachList = res.result.songs
				console.log(this.serachList);
			},
			getHistoryData (name) {
				this.musicName = name
				this.handelToSearch()
			},
			goMusic (id) {
				uni.navigateTo({
					url:'../detail/detail?id='+id
				})
			},
			async handelToSuggest (ev) {
				if(!ev.detail.value) {
				this.serachType = 1
				return
					
				}
				this.serachType = 3
				console.log(ev.detail.value);
			   const {data : res} = await this.$http({
					url:'/search/suggest?keywords= '+ev.detail.value+'&type=mobile'
				})
				console.log(res.result.allMatch);
				this.suggestList = res.result.allMatch
			}
		},
		async onLoad() {
			const {
				data: res
			} = await this.$http({
				url: '/search/hot/detail'
			})
			this.hotDataList = res.data
			console.log(this.hotDataList);
			uni.getStorage({
				key: 'historyNameArr',
				success: (res) => {
					this.historyName = res.data
				}
			})
		},
		onReachBottom (){
			this.limitNumber =this.limitNumber+10
			if(this.limitNumber <=100) {
			this.getSearchList()
				
			}
			console.log(this.musicName);
		}
	}
</script>

<style scoped lang="less">
	.search-search {
		display: flex;
		height: 80rpx;
		align-items: center;
		background-color: #eaeaea;
		border-radius: 15px;
		margin: 30rpx;

		input {
			flex: 1;
		}

		text {
			margin: 0 20rpx;
		}
	}

	.search-history {
		margin: 28rpx;

		.search-history-head {
			width: 100%;
			margin: 28rpx 0;
			display: flex;
			justify-content: space-between;

		}

		.search-history-item {
			display: flex;
			flex-flow: row wrap;

			view {
				box-sizing: border-box;
				padding: 22rpx 16rpx;
				background-color: #efefe8;
				border-radius: 22rpx;
				margin: 28rpx;
				color: #000;
			}
		}
	}

	.search-hot {
		margin: 28rpx;

		.search-hot-head {
			margin: 28rpx 0;
		}

		.search-hot-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 28rpx 0;

			.search-hot-index {
				font-weight: 700;
			}

			.search-hot-index-color {
				color: red;
			}

			.search-hot-name {
				flex: 1;
				margin-left: 41rpx;

				.search-hot-img {

					display: inline-block;
					margin-left: 20rpx;

					image {
						height: 22rpx;
						width: 48rpx;
					}
				}

				text {
					font-size: 26rpx;
					color: #8e8e8e;
				}
			}

			.search-hot-count {
				font-size: 30rpx;
				color: #b8b8b8;
			}
		}
	}
	.search-result-item {
		display: flex;
		justify-content: space-between;
		margin: 28rpx;
		margin-top: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid #898989;
		.search-result-name {
			text {
				color: #235790;
			}
			view {
				font-size: 22rpx;
				color: #898989;
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				image {
					width: 48rpx;
					height: 20rpx;
				}
			}
		}
		.search-result-icon {}
	}
	.search-suggest {
		margin: 28rpx;
		.search-suggest-head {
			margin: 40rpx 0;
			color: #235790;
		}
		.search-suggest-item {
			margin: 30rpx 0;
			color: ;
			font-size: 28rpx;
			text {
				margin-right: 30rpx;
			}
		}
	}
</style>
